<template>
  <div class="step2-box">
    <div>
      <t-form ref="forms" :label-width="0" :data="formData" :rules="rules" @submit="onSubmit" @validate="onValidate">
        <t-row>
          <t-col :span="5" :style="{ paddingRight: '20px' }">
            <div class="from-title-box">
              <div>
                <span class="from-title-box-name">单元标题</span>
                <span class="from-title-box-tip">*</span>
              </div>
              <div class="ai-icon-box" @click="setdrawervisible">
                <div class="ai-icon-box-shadow"></div>
                <img :src="publicUrls + `door/aiIcon.png`" alt="" />
              </div>
            </div>

            <t-form-item label="" name="name">
              <t-input show-limit-number :maxlength="16" v-model="formData.name" placeholder="请输入单元标题"></t-input>
            </t-form-item>
          </t-col>
          <t-col :span="7" style="">
            <div class="from-title-box">
              <span class="from-title-box-name">单元副标题</span>
              <div class="ai-icon-box" @click="setdrawervisible">
                <div class="ai-icon-box-shadow"></div>
                <img :src="publicUrls + `door/aiIcon.png`" alt="" />
              </div>
            </div>
            <t-form-item label="">
              <t-input
                show-limit-number
                :maxlength="30"
                v-model="formData.subTitle"
                placeholder="套用模版后，副标题会以“——”符号与主标题连接"
              ></t-input>
            </t-form-item>
          </t-col>
        </t-row>

        <t-form-item label="">
          <t-row :gutter="0" style="width: 100%; margin-bottom: 0px">
            <t-col :span="12" style="">
              <div class="text-wper">
                <div class="from-title-box from-title-box-sb">
                  <span class="from-title-box-name">单元描述</span>

                  <div class="ai-icon-box" @click="setdrawervisible">
                    <div class="ai-icon-box-shadow"></div>
                    <img :src="publicUrls + `door/aiIcon.png`" alt="" />
                  </div>
                </div>
              </div>
            </t-col>
            <t-col :span="12">
              <div class="description-box">
                <t-textarea
                  style="width: 100%"
                  :autosize="{ minRows: 5, maxRows: 10 }"
                  v-model="formData.description"
                  placeholder="请输入单元描述,最大字数5000字"
                  :maxlength="5000"
                ></t-textarea>
                <div class="from-title-box-end">
                  <span style="color: rgba(0, 0, 0, 0.38); font-size: 14px"
                    >{{ formData.description ? formData.description.length : 0 }}/5000</span
                  >
                </div>
              </div>
              <!-- <DydEditor v-model=""></DydEditor> -->
            </t-col>
            <t-col :span="12">
              <div class="right-box" v-if="store.isUploadRadio">
                <t-loading size="small" :loading="audioLoading && !audioVisible" show-overlay>
                  <div class="style-audio-add" @click="creatAi">
                    <i class="doorIcon"> &#xe652; </i>
                    <span> 生成语音 </span>
                  </div>
                </t-loading>
              </div>
            </t-col>
          </t-row>
        </t-form-item>
        <t-col :span="12" style="margin-bottom: 20px">
          <div class="from-title-box">
            <div>
              <span class="from-title-box-name">全景链接</span>
              <span class="from-title-box-tip"></span>
            </div>
          </div>

          <t-form-item label="">
            <t-input :maxlength="100" v-model="formData.digitalShowroom" placeholder="请输入全景链接"></t-input>
          </t-form-item>
        </t-col>
        <t-form-item label="语音讲解" v-if="store.isUploadRadio">
          <div class="hw-from-content">
            <div class="from-title-box">
              <span class="from-title-box-name">语音讲解</span>
            </div>
            <t-loading size="small" :loading="audioLoading && !audioVisible" show-overlay text="语音生成中...">
              <div class="audio-list-box-upload-parent" @click="openaudioVisible" v-if="!formData.audio.url">
                <div class="audio-list-box-upload">
                  <i class="doorIcon"> &#xe652; </i>
                  <span> 添加音频 </span>
                </div>
              </div>

              <HWplayer
                :editType="true"
                :audio="formData.audio"
                v-else
                @editAudioUrl="openaudioVisible"
                @delAudioUrl="delAudioUrls"
              />
            </t-loading>
            <span class="audio-tip">支持10M以内MP3格式音频，最多1条</span>
          </div>
        </t-form-item>
        <t-form-item label="" name="coverUrl">
          <t-row :gutter="0" style="margin-bottom: 0px">
            <t-col :span="12" style="">
              <div class="from-title-box">
                <span class="from-title-box-name">单元封面图</span>
              </div>
            </t-col>
            <t-col :span="12">
              <div class="upload-parent">
                <div class="img-boxs" v-if="formData.coverUrl">
                  <div class="img-boxs-icon">
                    <div class="img-boxs-icon-item" @click="lookcoverUrl()">
                      <i class="doorIcon">&#xe630;</i>
                    </div>
                    <div class="img-boxs-icon-item" @click="delimg(index)">
                      <i class="doorIcon">&#xe634;</i>
                    </div>
                  </div>
                  <!-- <div class="icon-box">
                    <t-icon name="browse" size="20px" style="cursor: pointer; color: #fff" @click="lookcoverUrl()" />
                    <span class="img-boxs-solid"></span>
                    <t-icon name="delete" size="20px" style="cursor: pointer; color: #fff" @click="delimg(index)" />
                  </div> -->
                  <img
                    class="upload-boxs-item t-image t-image--fit-contain t-image--position-center"
                    :src="urls + formData.coverUrl + webUrls"
                    alt=""
                  />
                </div>
                <t-upload
                  v-else
                  ref="uploadRef1"
                  :max="1"
                  accept=".png,.jpg,.webp"
                  :onSelectChange="beforeUpload"
                  :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
                  @fail="handleFail"
                >
                  <div class="upload-boxs">
                    <i class="doorIcon">&#xe662;</i>
                    <span>点击上传图片</span>
                  </div>
                </t-upload>
                <span class="tips">支持2M以内JPG、PNG图片</span>
              </div>
            </t-col>
          </t-row>
        </t-form-item>
        <!-- <t-form-item label=""> 
          <t-row :gutter="16">
            <t-col :span="12" style="; margin-top: 24px">
              <div>其他资料上传</div>
            </t-col>
            <t-col :span="12">
              <t-form-item>
                <div>
                  <t-upload
                    accept=".jpg,.png,.mp3,.mp4,.pdf"
                    ref="uploadRef1"
                    v-model="filelist2"
                    :before-upload="beforeUpload1"
                    :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
                    @fail="handleFail"
                  >
                    <div class="upload-card-top">
                      <div class="click-load">
                        <t-icon name="backtop" style="color: #333"></t-icon>
                        <span>选择文件</span>
                      </div>
                      <span>支持批量上传,支持20M以内的PDF,MP4,MP3,图片。注意:对于不同模板,此处文件可能不会展示</span>
                    </div>
                  </t-upload>

                  <t-base-table style="margin-top: 16px" row-key="index" :data="formData.data" :columns="columns">
                    <template #data="{ row }">
                      <img :src="urls + row.data" alt="" class="img-box" />
                    </template>
                    <template #status>
                      <t-icon name="check-circle-filled" color="rgba(0, 168, 112, 1)" size="14px"></t-icon>
                      <span style="margin-left: 9px">上传成功</span>
                    </template>
                    <template #size="{ row }">
                      <span>{{ (row.size / 1000).toFixed(1) }}k</span>
                    </template>
                    <template #operation="{ row, rowIndex }">
                      <div class="operation-box">
                        <span class="hw-click-cursor" @click="look(row)">查看</span>
                        <span class="hw-click-cursor" @click="remove(rowIndex)">删除</span>
                      </div>
                    </template>
                  </t-base-table>
                </div>
              </t-form-item>
            </t-col>
          </t-row>
        </t-form-item> -->
      </t-form>
    </div>
    <setAcatar @submit="clieSubmit" :visible="clievisible" @close="clieclose" :imgCode="imgCode" @setImg="cliesetImg" />
    <viewer v-if="visible" v-model="visible" :imagesUrl="images" />
    <t-image-viewer v-model:visible="IMGvisible" :images="[urls + formData.coverUrl]"> </t-image-viewer>
    <audioUploads
      ref="audioUploadRef"
      v-if="audioVisible"
      :maxLengh="5000"
      :unitInfo="props.info"
      :info="formData.audio"
      :visible="audioVisible"
      @sbumitAudio="sbumitAudio"
      @emitTaskId="emitTaskId"
      @close="closeAudio"
    />
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import audioUploads from '@/components/addExbition/addUnitAudioModel.vue';
import HWplayer from '@/components/audio/UnitAudio.vue';
import { createdTSAudio, queryTSAudio } from '@/api/exhibit/exhibit';
import { useCounter } from '@/hooks/audioHooks';
import { cloneDeep } from 'lodash';
import setAcatar from '@/components/avatar/Setavatar.vue';
import { publicUrls, dataURLtoFile } from '@/utils/minxin';
import viewer from '@/components/viewerLoop/viewer.vue';
import { upLoadFn } from '@/utils/request/upload';
import { url, heards, urls } from '@/utils/request/upload';
import { ref, reactive, watch, defineExpose, nextTick, computed } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';

import { columns } from './data';
import { moduleSaveInfo } from '@/api/desgin/desgin';
import DydEditor from '@/components/RichText/Editor.vue';
import { useProjectStore, useUserStore } from '@/store';
const { audioTimer, audioLoading, clearaudioTimer } = useCounter();
const userStore = useUserStore();
const store = useProjectStore();
const webUrls: string = '?imageView2/3/w/120/h/120/format/webp';
const datas = reactive({
  file: {
    base64: '',
    contentType: '',
    fileName: '',
    format: '',
  },
});

const forms = ref(null);
const audioVisible = ref(false);
const audioUploadRef = ref(null);
const imgCode = ref<any>('');
const clievisible = ref(false);
const IMGvisible = ref(false);
const uploadAllFilesInOneRequest = ref(false);
const filelist2 = ref([]);
const formData = reactive({
  filelist1: [],
  data: [],
  name: '',
  subTitle: '',
  description: '',
  coverUrl: '',
  digitalShowroom: '',
  audio: {
    type: 3,
    url: '',
    description: '',
    name: '',
    taskId: '',
    taskStatus: -2,
  },
});

const visible = ref(false);
const images = ref('');
const props = defineProps({
  info: {
    type: Object,
  },
});
const emit = defineEmits(['setFrom', 'setInfo', 'saveGroup', 'saveImg', 'oepnAI']);
const setdrawervisible = () => {
  if (userStore.VipLevel === 0 && !store.isActivitys) {
    MessagePlugin.warning('当前会员等级不可使用，请升级会员等级');
    return;
  }
  emit('oepnAI');
};
//语音模块函数
const openaudioVisible = () => {
  store.setModelIndex(true);
  audioVisible.value = true;
};
const creatAi = () => {
  //通过按钮传入单元描述
  store.setModelIndex(true);
  audioVisible.value = true;
  nextTick(() => {
    setTimeout(() => {
      audioUploadRef.value.setDescription(formData.description);
    }, 100);
  });
};
const sbumitAudio = (parmass: any) => {
  //语音传入
  let arrInfo = cloneDeep(parmass);
  // console.log(arrInfo);

  formData.audio = arrInfo;

  audioVisible.value = false;
  store.setModelIndex(false);
};
const emitTaskId = (parmass: any) => {
  //语音传入TaskId
  let arrInfo = cloneDeep(parmass);
  formData.audio = arrInfo;
  if (formData.audio.taskId && formData.audio.taskStatus === 0) {
    audioLoading.value = true;
    // PollingTime();
  } else {
    audioLoading.value = false;
  }
};
const closeAudio = () => {
  audioVisible.value = false;
  store.setModelIndex(false);
  if (formData.audio.taskId && formData.audio.taskStatus === 0) {
    audioLoading.value = true;
    PollingTime();
  }
};
const PollingTime = () => {
  //音频生成轮询函数
  clearaudioTimer();
  audioLoading.value = true;
  audioTimer.value = setInterval(() => {
    queryTSAudio(formData.audio.taskId).then((res) => {
      // console.log(res.data);
      if (res.data) {
        formData.audio.taskId = res.data.taskId;
        formData.audio.taskStatus = res.data.taskStatus;
        if (res.data.taskStatus === 1) {
          MessagePlugin.success('生成成功');
          clearaudioTimer();
          formData.audio.url = res.data.url;
          formData.audio.name = res.data.name;
        }
        if (res.data.taskStatus === -1) {
          clearaudioTimer();
        }
      }
    });
  }, 2500);
};
//其他模块
const lookcoverUrl = () => {
  IMGvisible.value = true;
};
const delimg = () => {
  formData.coverUrl = '';
  moduleSaveInfo(localStorage.getItem('projectId'), store.id, { coverUrl: '' });
};
watch(
  () => formData,
  () => {
    emit('setInfo', formData);
    // const unitName = document.getElementById('unitName');
    // unitName.scrollIntoView({ behavior: 'smooth' });
  },
  { deep: true },
);
watch(
  () => props.info,
  () => {
    clearaudioTimer();
    formData.name = props.info.name;
    formData.description = props.info.description;
    formData.coverUrl = props.info.coverUrl;
    formData.data = props.info.data;
    formData.subTitle = props.info.subTitle;
    formData.digitalShowroom = props.info.digitalShowroom;
    formData.audio = props.info.audio;
    if (formData.audio.taskId && formData.audio.taskStatus === 0) {
      audioLoading.value = true;
      PollingTime();
    } else {
      audioLoading.value = false;
    }
    setTimeout(() => {
      store.$patch((state) => {
        state.planChildType = false;
      });
    }, 300);
    // console.log(changKey.value);
  },
  { deep: true },
);
const onReset = () => {
  MessagePlugin.success('重置成功');
};

const look = (row) => {
  images.value = urls + row.url;

  visible.value = true;
};
const remove = (index: number) => {
  formData.data.splice(index, 1);
};
const onSubmit = ({ validateResult, firstError, e }) => {
  e.preventDefault();
  if (validateResult === true) {
    emit('setFrom', formData);
  } else {
    // console.log('Validate Errors: ', firstError, validateResult);
    // MessagePlugin.warning(firstError);
  }
};
const handleFail = () => {};

const onValidate = ({ validateResult, firstError }) => {
  if (validateResult === true) {
    console.log('Validate Success');
  } else {
    console.log('Validate Errors: ', firstError, validateResult);
  }
};

const rules = {
  name: [
    { required: true, message: '单元名称必填', type: 'error' },
    {
      min: 2,
      message: '至少需要两个字',
      type: 'error',
      trigger: 'blur',
    },
  ],
};

const beforeUpload = (e: any) => {
  //回调钩子

  let file = e[0];
  console.log(file);
  if (
    file.type !== 'image/png' &&
    file.type !== 'image/jpg' &&
    file.type !== 'image/jpeg' &&
    file.type !== 'image/jpeg'
  ) {
    MessagePlugin.error('文件类型错误');
    return;
  }
  if (file.size / 1048576 > 2) {
    MessagePlugin.error('上传大小超出2M限制');
    return;
  }
  if (window.FileReader) {
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
      let base64String = e.target.result;
      imgCode.value = base64String;

      datas.file = {
        raw: file,
        fileName: file.name,
        name: file.name,
        type: 'image',
      };
      store.setModelIndex(true);

      clievisible.value = true;
    };
  }
};

const cliesetImg = (e: any) => {
  beforeUpload(e);
};
const clieSubmit = (e: String) => {
  let arrr = dataURLtoFile(e, datas.file.name);
  imgCode.value = e;
  datas.file.raw = arrr;
  clievisible.value = false;
  setTimeout(() => {
    store.setModelIndex(false);
  }, 200);
  upLoadFn(datas.file, 5).then((res) => {
    // console.log(res);
    if (res) {
      formData.coverUrl = res;
      if (store.id !== 0) {
        moduleSaveInfo(localStorage.getItem('projectId'), store.id, { coverUrl: res });
        // nextTick(() => {
        //   emit('setInfo', formData);
        //   emit('saveGroup');
        // });
      }
    } else {
      MessagePlugin.error('上传失败');
    }
  });
};

const clieclose = (e: any) => {
  clievisible.value = false;
  setTimeout(() => {
    store.setModelIndex(false);
  }, 200);
};
const delAudioUrls = () => {
  //删除音频
  console.log('删除');
  formData.audio.url = '';
  formData.audio.name = '';
};
const beforeUpload1 = (file: any) => {
  //回调钩子
  if (file.size / 1048576 > 20) {
    MessagePlugin.error('上传大小超出20M限制');
    return;
  }
  if (
    file.name.indexOf('.png') == -1 &&
    file.name.indexOf('.jpg') == -1 &&
    file.name.indexOf('.mp4') == -1 &&
    file.name.indexOf('.mp3') == -1 &&
    file.name.indexOf('.pdf') == -1
  ) {
    MessagePlugin.error('文件类型不支持');
    return;
  }

  // .mp3,.mp4,.pdf
  console.log(file);
  upLoadFn(file, 5).then((res) => {
    // console.log(res);
    if (res) {
      let obj = {
        url: res,
        type: 0,
        name: file.name,
        size: file.size,
        status: 0,
        operation: null,
      };
      formData.data.push(obj);
    } else {
      MessagePlugin.error('创建成功');
    }
  });
};
const onSuccess3 = (e) => {
  //其他材料上传
};
const initData = () => {
  forms.value.submit();
};
const setDatas = (e) => {
  clearaudioTimer();
  formData.name = e.name;
  formData.description = e.description;
  formData.coverUrl = e.coverUrl;
  formData.data = e.data;
  formData.subTitle = e.subTitle ? e.subTitle : '';
  formData.digitalShowroom = e.digitalShowroom ? e.digitalShowroom : '';
  formData.audio = e.audio
    ? e.audio
    : {
        type: 3,
        url: '',
        description: '',
        name: '',
        taskId: '',
        taskStatus: -2,
      };

  if (formData.audio.taskId && formData.audio.taskStatus === 0) {
    audioLoading.value = true;
    PollingTime();
  } else {
    audioLoading.value = false;
  }
};

defineExpose({
  initData,
  setDatas,
});
</script>

<style lang="less" scoped>
.step2-box {
  width: 100%;
  max-height: 100%;
  // padding: 32px 0;
  margin-top: 16px;
  overflow-y: auto;
  padding: 0 24px;
  //   background: #fefefe;
  //   border: 1px solid #D2AD77;
  :deep(.t-textarea__inner) {
    min-height: 140px;
  }
}
.step2-box {
  // width: 100%;
  // height: 100%;
  border-radius: 4px;
}
.step2-box::-webkit-scrollbar {
  display: none;
}

.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 120px;

  opacity: 0;
  z-index: 66;
  background: rgba(0, 0, 0, 0.4);
}

.upload-box {
  width: 266px;
  height: 176px;
  margin-right: 20px;

  img {
    width: 266px;
    height: 176px;
  }
}

.t-row {
  width: 100%;
  margin-top: 0;
  margin-bottom: 16px;
}
.uploadRef-box {
  display: flex;
  flex-wrap: wrap;
}
.t-col {
  margin-bottom: 0;
}
.t-form__controls-content {
  width: 100%;
}
.upload-card-top {
  cursor: pointer;
  display: flex;
  align-items: center;
  img {
    width: 112px;
    height: 32px;
  }
  span {
    margin-left: 12px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4);
    line-height: 20px;
  }
}
.hw-click-cursor {
  color: @color-text-color;
  margin-right: 12px;
}
:deep(.t-table) {
  border: 1px solid #e7e7e7;
}
:deep(.t-table__header) {
  height: 48px;
}
:deep(.t-table__body tr) {
  height: 60px;
}
.click-load {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 32px;
  border: 1px solid #999;
  border-radius: 4px;
  span {
    font-size: 14px;
    color: #333;
    margin-left: 0;
  }
}
:deep(.t-image) {
  // background: #999;

  background: #d8d8d8;
}
:deep(.t-textarea__inner) {
  padding-bottom: 24px;
  border: none;
}
:deep(.t-textarea__limit) {
  display: none;
}

.text-wper {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.t-col {
  margin-bottom: 0px;
}
.upload-boxs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 184px;
  height: 184px;
  background: #fcfbfa;
  border-radius: 4px;
  cursor: pointer;
  border: 1px dashed #ebe4e3;

  .doorIcon {
    font-size: 24px;
    color: rgba(0, 0, 0, 0.38);
    margin-bottom: 12px;
  }
  span {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.38);
    line-height: 24px;
  }
}
.upload-boxs:hover {
  border: 1px dashed #f2573f;
}
.upload-parent {
  display: flex;
  align-items: flex-end;
  .tips {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.38);
    line-height: 22px;
    margin-left: 10px;
  }
}
.img-boxs {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 184px;
  height: 184px;
  border-radius: 4px;
  overflow: hidden;

  border: 1px dashed #ebe4e3;
  .upload-boxs-item {
    width: 184px;
    height: 184px;
    border-radius: 4px;
  }
}
.img-boxs-icon {
  position: absolute;
  top: 8px;
  right: 10px;
  display: flex;
  z-index: 1;
}
.img-boxs-icon-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.3);
  // background: #ffffff;
  // box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05), 0px 4px 5px 0px rgba(0, 0, 0, 0.08),
  //   0px 2px 4px -1px rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  // border: 1px solid #f0f0f0;
  margin-left: 8px;
  // margin-top: 8px;
  .doorIcon {
    font-size: 16px;
    line-height: 16px;
    color: rgba(255, 255, 255, 0.6);
  }
}
.img-boxs-icon-item:hover {
  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05), 0px 4px 5px 0px rgba(0, 0, 0, 0.08),
    0px 2px 4px -1px rgba(0, 0, 0, 0.12);
  border: 1px solid #f0f0f0;

  background: #ffffff;
  span {
    color: rgba(0, 0, 0, 0.59);
  }
  .doorIcon {
    color: rgba(0, 0, 0, 0.59);
  }
}
.t-image {
  background: #fafafa;
}
.from-title-box {
  width: calc(100%);
  display: flex;
  justify-content: space-between;
}
::v-deep .t-input.t-input--suffix > .t-input__suffix {
  z-index: 0;
}
.from-title-box-sb {
  width: 100% !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.from-title-box-end {
  width: 100% !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 12px 7px 0;
  color: rgba(0, 0, 0, 0.38);
  text-align: right;
  font-family: 'PingFang SC';
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 157.143% */
}
.ai-icon-box {
  position: relative;
  cursor: pointer;
  margin-left: 8px;
  width: 50px;
  height: 24px;
  // margin-right: 20px;
  img {
    width: 50px;
    height: 24px;
  }
}
.ai-icon-box-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 24px;
  background: #ffffff;
  border-radius: 4px;
  opacity: 0;
  z-index: 6;
}
.ai-icon-box:hover {
  .ai-icon-box-shadow {
    opacity: 0.2;
  }
}
:deep(.t-textarea__inner) {
  font-size: 16px;
  line-height: 24px;
}
:deep(.t-textarea__limit) {
}
:deep(.t-textarea__inner::placeholder) {
  font-size: 16px;
  line-height: 24px;
}
.description-box {
  width: 100%;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  background: #fff;
  &:hover {
    border: 1px solid #f2573f;
  }
}
:deep(.narrow-scrollbar) {
  scrollbar-width: none;
}
:deep(.t-form__item) {
  margin-bottom: 16px;
}

.audio-list-box-upload-parent {
  width: 124px;
  height: 36px;
}
.audio-list-box-upload {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 124px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid #e62b17;
  .doorIcon {
    color: #e62b17;
    font-size: 16px;
  }
  span {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #e62b17;
    line-height: 24px;
    margin-left: 8px;
  }
}
.audio-tip {
  display: flex;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.38);
  line-height: 22px;
  margin-top: 8px;
}
.list-tip-box {
  display: flex;
  align-items: flex-end;
  width: 184px;
  // height: 184px;
  margin-left: 8px;
}
.list-tip-box-mg {
}
:deep(.t-radio) {
  margin-right: 0px;
}
//
:deep(.tox-tinymce) {
  height: 160px !important;
}
.right-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 12px;
}
.radio-parent {
  display: flex;
  align-items: center;
  // justify-content: center;
  height: 36px;
}
.style-audio-add {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 108px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid #e62b17;
  i {
    font-size: 18px;
    color: #e62b17;
  }
  span {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #e62b17;
    line-height: 24px;
    margin-left: 4px;
  }
}
</style>
